<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>test</title>
    <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
    <link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
		<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="jquery-ui-1.8.20.custom.min.js"></script>
    
    <script type="text/javascript" language="javascript" src="giveawaymillion/giveawaymillion.nocache.js"></script>
  </head>

  <body>
    <style>
	#feedback { font-size: 1.4em; }
	#selectable .ui-selecting { background: #FECA40; }
	#selectable .ui-selected { background: #F39814; color: white; }
	#selectable { list-style-type: none; margin: 0; padding: 0; }
	#selectable li { margin: 0px; padding: 0px; float: left; width: 20px; height: 20px; font-size: 5px; text-align: center; }
	</style>
	<script>
	$(function() {
		$( "#selectable" ).selectable({
			stop: function() {
				var result = $( "#select-result" ).empty();
				var result_count = $( "#select-box");
				var count = 0;
				$( ".ui-selected", this ).each(function() {
					var index = $( "#selectable li" ).index( this );
					result.append( " #" + ( index + 1 ) );
					count = count+ 1;
					result_count.text(count);
				});
				
			}
		});
	});
	</script>

<div class="demo-description">
<p>Draw a box with your cursor to select items. Hold down the Ctrl key to make multiple non-adjacent selections. </p>
</div>
<p id="feedback">
<span>You've selected:</span> <span id="select-result">none</span>.
<br>
<span>Total Box selected:</span> <span id="select-box">none</span>.
</p>

<div id="main" style="width:1100px; height:1000px;"class="demo">
<ol id="selectable">
<script type="text/javascript" >
var index =0;
for(i = 0; i < 50; i++){
	for(j = 0; j < 50; j++){
		    index++;
			document.write("<li class='ui-widget-content'>"+index+"</li>");
	}
}
</script>
</ol>


</div>
</div>
  </body>
</html>